<template>
  <van-popup v-model:show="showPicker" round position="bottom">
    <van-picker
      :columns="columns"
      :columns-field-names="customFieldName"
      @confirm="onConfirm"
      @cancel="showPicker = false"
    >
      <template #title>
        <span class="clear-btn" @click="handleClear"> 清空选择 </span>
      </template>
    </van-picker>
  </van-popup>
</template>

<script setup lang="ts">
import { useVModels } from '@vueuse/core'
import { ref, defineProps, defineEmits, onMounted } from 'vue'
import axios from '/@/api/axios'
import { Dictionary } from '/@/types/Dictionary'

const props = defineProps<{
  show: boolean
  modelValue: number | undefined
  warnningTypeName: string
}>()

const emits = defineEmits([
  'update:show',
  'update:modelValue',
  'update:warnningTypeName',
])

const customFieldName = {
  text: 'dictValue',
}

const {
  modelValue: value,
  show: showPicker,
  warnningTypeName: typeName,
} = useVModels(props, emits)

function onConfirm(item: Dictionary) {
  value.value = item.dictKey
  showPicker.value = false
  typeName.value = item.dictValue
}

function handleClear() {
  showPicker.value = false
  value.value = undefined
  typeName.value = ''
}

const { columns } = useColumns()

function useColumns() {
  const url = '/api/blade-system/dict/dictionary?code=warning_type'

  const columns = ref<Dictionary[]>([])

  onMounted(async () => {
    const {
      data: { data },
    } = await axios.get(url)
    columns.value = data
  })

  return {
    columns,
  }
}
</script>

<style lang="less" scoped>
.clear-btn {
  font-size: var(--van-picker-action-font-size);
}
</style>
